<template>
  <!-- <Tutorial/> -->
  <div>
    <navHead :tabflag="0" />
    <banner :bannercontent="bannercontent" />
    <div class="container">
      <div class="bacbox">
        <div class="item">
          <div class="top">
            <countTo class="fs-24" :startVal="0" :endVal="236" :duration="1000" />
            <!-- <span class="fs-24">6.8</span> -->
            <span>亿元</span>
          </div>
          <div class="bottom">年发薪量</div>
        </div>
        <div class="line"></div>
        <div class="item">
          <div class="top">
            <countTo class="fs-24" :startVal="0" :endVal="873" :duration="1000" />
            <span>万+</span>
          </div>
          <div class="bottom">年领薪人数</div>
        </div>
        <div class="line"></div>
        <div class="item">
          <div class="top">
            <countTo class="fs-24" :startVal="0" :endVal="500" :duration="1000" />
            <span>万+</span>
          </div>
          <div class="bottom">C端员工注册量</div>
        </div>
        <div class="line"></div>
        <div class="item">
          <div class="top">
            <countTo class="fs-24" :startVal="0" :endVal="3700" :duration="1000" />
            <span>户+</span>
          </div>
          <div class="bottom">年发薪总开户数</div>
        </div>
        <div class="line"></div>
        <div class="item">
          <div class="top">
            <countTo class="fs-24" :startVal="0" :endVal="1.5" :duration="1000" :decimals="1"/>
            <span>万户+</span>
          </div>
          <div class="bottom">总开户数</div>
        </div>
      </div>
    </div>
    <titles :titlescontent="titlescontent" />
    <div class="aboutsmallimg container">
      <img src="../assets/img/aboutsmallimg.png" alt="" />
    </div>
    <titles :titlescontent="titlescontent1" />
    <div class="container">
      <div class="product">
        <div class="productlist" @click="topaywages">
          <div class="img img1"></div>
          <div class="h2">无卡发薪</div>
          <p class="p1">
            无需银⾏卡，入职当⽇即可发薪联合微信⽀付共同打造，⼀秒批量⽀付到员⼯微信零钱。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img2"></div>
          <div class="h2">私域招聘</div>
          <p class="p1">
            包含基础招聘、拼团求职、分享裂变、获取号码、智能人事，等实用功能。为人力公司打造属于自己的私域流量池和求职者简历库。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img3"></div>
          <div class="h2">电子考勤</div>
          <p class="p1">
            人脸识别，员工手机打卡可自主设置打卡规则、电子围栏，自动生成考勤报表，彻底摆脱手工做考勤。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img4"></div>
          <div class="h2">便捷记名单</div>
          <p class="p1">
            告别手工登记、拍照登记员工扫码直接生成花名册批量填写供应商&工价政策，驻厂现场就能做好名单。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img5"></div>
          <div class="h2">员工库</div>
          <p class="p1">
            电子员工档案，随时随地跟派遣员工沟通，可一键给派遣员工批量发通知，更方便的给派遣员工做服务。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img6"></div>
          <div class="h2">电子合同</div>
          <p class="p1">
            在线一键签约，操作便捷易保存、易查询，相较纸质合同管理成本更低，效率更高。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img7"></div>
          <div class="h2">团队协作</div>
          <p class="p1">
            供应商、经纪人、驻厂、老板共同管理项目，多人实时在线编辑，无缝对接，大幅降低沟通成本。
          </p>
        </div>
        <div class="productlist" @click="topaywages">
          <div class="img img8"></div>
          <div class="h2">高效审批</div>
          <p class="p1">
            随时随地审批，支持自主设置审批规则、设置审批模板，更贴合劳务行业日常真实审批场景。
          </p>
        </div>
      </div>
    </div>
    <titles :titlescontent="titlescontent2" />
    <div class="container">
      <div class="tab1">
        <div class="tabitem" @click="changetabtwo(0)">
          <div>拓客引流</div>
          <div :class="{ line: true, active: tabflagtwo === 0 }"></div>
        </div>
        <div class="tabitem" @click="changetabtwo(1)">
          <div>营销转化</div>
          <div :class="{ line: true, active: tabflagtwo === 1 }"></div>
        </div>
        <div class="tabitem" @click="changetabtwo(2)">
          <div>客户运营</div>
          <div :class="{ line: true, active: tabflagtwo === 2 }"></div>
        </div>
        <div class="tabitem" @click="changetabtwo(3)">
          <div>分享裂变</div>
          <div :class="{ line: true, active: tabflagtwo === 3 }"></div>
        </div>
        <div class="tabitem" @click="changetabtwo(4)">
          <div>运营管理</div>
          <div :class="{ line: true, active: tabflagtwo === 4 }"></div>
        </div>
      </div>
    </div>
    <contentComponent v-show="tabflagtwo === 0" :contentData="twocontentData" />
    <contentComponent v-show="tabflagtwo === 1" :contentData="twocontentData1" />
    <contentComponent v-show="tabflagtwo === 2" :contentData="twocontentData2" />
    <contentComponent v-show="tabflagtwo === 3" :contentData="twocontentData3" />
    <contentComponent v-show="tabflagtwo === 4" :contentData="twocontentData4" />
    <titles :titlescontent="titlescontent3" />
    <div class="container">
      <div class="tab1">
        <div class="tabitem" @click="changetabone(0)">
          <div>场景工种全</div>
          <div :class="{ line: true, active: tabflagone === 0 }"></div>
        </div>
        <div class="tabitem" @click="changetabone(1)">
          <div>随时投保</div>
          <div :class="{ line: true, active: tabflagone === 1 }"></div>
        </div>
        <div class="tabitem" @click="changetabone(2)">
          <div>极速理赔</div>
          <div :class="{ line: true, active: tabflagone === 2 }"></div>
        </div>
      </div>
    </div>
    <contentComponent v-show="tabflagone === 0" :contentData="contentData" />
    <contentComponent v-show="tabflagone === 1" :contentData="contentData2" />
    <contentComponent v-show="tabflagone === 2" :contentData="contentData3" />
    <titles :titlescontent="titlescontent4" />
    <div class="container">
      <div class="hoverbox">
        <div
          class="hoveritem hoveritem1"
          @mouseenter="handleMouseEnter1"
          @mouseleave="handleMouseLeave1"
        >
          <div class="top1" v-if="!ishoverflag1">
            <div class="topimg">
              <img src="../assets/img/xcxicon.png" alt="" />
            </div>
          </div>
          <div class="titlebord" v-if="!ishoverflag1">子弹发薪小程序</div>
          <div class="titlenobord" v-if="!ishoverflag1">
            适用于临时工、长期工日结工的线上发薪小程序
          </div>
          <div v-if="!ishoverflag1" class="hoversmallimg">
            <img src="../assets/img/hoverzdfxxcxc.png" alt="" />
          </div>
          <div class="top2" v-if="ishoverflag1">
            <img src="../assets/img/xcxiconcx.png" alt="" />
            <span>子弹发薪小程序</span>
          </div>
          <div class="hovertitlenobord" v-if="ishoverflag1">
            适用于临时工、长期工日结工的线上发薪小程序
          </div>
          <div class="hoverimg" v-if="ishoverflag1">
            <img src="../assets/img/zdgzxcxlc.png" alt="" />
          </div>
          <div class="hoverbtn" v-if="ishoverflag1">
            <div class="btn" @click="opentcc">免费试用</div>
          </div>
        </div>
        <div
          class="hoveritem hoveritem2"
          @mouseenter="handleMouseEnter2"
          @mouseleave="handleMouseLeave2"
        >
          <div class="top1" v-if="!ishoverflag2">
            <div class="topimg">
              <img src="../assets/img/pciconc.png" alt="" />
            </div>
          </div>
          <div class="titlebord" v-if="!ishoverflag2">子弹发薪PC端</div>
          <div class="titlenobord" v-if="!ishoverflag2">
            3步批量发薪更省时、省力、省心
          </div>
          <div v-if="!ishoverflag2" class="hoversmallimg">
            <img src="../assets/img/zdfxpccbc.png" alt="" />
          </div>
          <div class="top2" v-if="ishoverflag2">
            <img src="../assets/img/pcicon.png" alt="" />
            <span>子弹发薪小程序</span>
          </div>
          <div class="hovertitlenobord" v-if="ishoverflag2">
            适用于临时工、长期工日结工的线上发薪小程序
          </div>
          <div class="hoverimg" v-if="ishoverflag2">
            <img src="../assets/img/zdfxpccbc.png" alt="" />
          </div>
          <div class="hoverbtn" v-if="ishoverflag2">
            <div class="btn" @click="topaywages">查看更多</div>
          </div>
        </div>
        <div
          class="hoveritem hoveritem3"
          @mouseenter="handleMouseEnter3"
          @mouseleave="handleMouseLeave3"
        >
          <div class="top1" v-if="!ishoverflag3">
            <div class="topimg">
              <img src="../assets/img/H5icon.png" alt="" />
            </div>
          </div>
          <div class="titlebord" v-if="!ishoverflag3">子弹企微助手H5</div>
          <div class="titlenobord" v-if="!ishoverflag3">便捷办公更高效连接用户</div>
          <div v-if="!ishoverflag3" class="hoversmallimg">
            <img src="../assets/img/hoverzdqwzsxcc.png" alt="" />
          </div>
          <div class="top2" v-if="ishoverflag3">
            <img src="../assets/img/h5c2x.png" alt="" />
            <span>子弹企微助手H5</span>
          </div>
          <div class="hovertitlenobord" v-if="ishoverflag3">便捷办公更高效连接用户</div>
          <div class="hoverimg" v-if="ishoverflag3">
            <img src="../assets/img/zdqwzscch5c.png" alt="" />
          </div>
          <div class="hoverbtn" v-if="ishoverflag3"></div>
        </div>
        <div
          class="hoveritem hoveritem4"
          @mouseenter="handleMouseEnter4"
          @mouseleave="handleMouseLeave4"
        >
          <div class="top1" v-if="!ishoverflag4">
            <div class="topimg">
              <img src="../assets/img/pciconc.png" alt="" />
            </div>
          </div>
          <div class="titlebord" v-if="!ishoverflag4">子弹企微助手PC端</div>
          <div class="titlenobord" v-if="!ishoverflag4">
            让企业多个部门与客户形成直接沟通触点
          </div>
          <div v-if="!ishoverflag4" class="hoversmallimg">
            <img src="../assets/img/zdqwzsbcc.png" alt="" />
          </div>
          <div class="top2" v-if="ishoverflag4">
            <img src="../assets/img/pcicon.png" alt="" />
            <span>子弹企微助手PC端</span>
          </div>
          <div class="hovertitlenobord" v-if="ishoverflag4">
            让企业多个部门与客户形成直接沟通触点
          </div>
          <div class="hoverimg" v-if="ishoverflag4">
            <img src="../assets/img/zdqwzsccpcc.png" alt="" />
          </div>
          <div class="hoverbtn" v-if="ishoverflag4">
            <div class="btn" @click="tohelper">查看更多</div>
          </div>
        </div>
        <div
          class="hoveritem hoveritem5"
          @mouseenter="handleMouseEnter5"
          @mouseleave="handleMouseLeave5"
        >
          <div class="top1" v-if="!ishoverflag5">
            <div class="topimg">
              <img src="../assets/img/xcxicon.png" alt="" />
            </div>
          </div>
          <div class="titlebord" v-if="!ishoverflag5">子弹工作小程序</div>
          <div class="titlenobord" v-if="!ishoverflag5">打卡领薪私域求职</div>
          <div v-if="!ishoverflag5" class="hoversmallimg">
            <img src="../assets/img/zdgzxcx_bcc.png" alt="" />
          </div>
          <div class="top2" v-if="ishoverflag5">
            <img src="../assets/img/xcxiconcx.png" alt="" />
            <span>子弹发薪小程序</span>
          </div>
          <div class="hovertitlenobord" v-if="ishoverflag5">
            适用于临时工、长期工日结工的线上发薪小程序
          </div>
          <div class="hoverimg" v-if="ishoverflag5">
            <img src="../assets/img/zdgzxcxccc.png" alt="" />
          </div>
          <div class="hoverbtn" v-if="ishoverflag5">
            <div class="btn" @click="opentcc">免费试用</div>
          </div>
        </div>
      </div>
    </div>
    <titles :titlescontent="titlescontent5" />
    <div class="container" style="margin-bottom: 120px">
      <div class="friends">
        <div class="img">
          <img src="../assets/img/wxzf.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/jd.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/sfsy.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/zfbccc.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/cnccc.png" alt="" />
        </div>
      </div>
    </div>
    <div class="container" style="margin-bottom: 200px">
      <div class="friends">
        <div class="img">
          <img src="../assets/img/ztccc.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/stccc.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/ydccc.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/jt.png" alt="" />
        </div>
        <div class="img">
          <img src="../assets/img/zgbxccc.png" alt="" />
        </div>
      </div>
    </div>
    <foot />
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      style="text-align: center"
    >
      <h3 style="text-align: center">请扫码添加联系客服，体验本产品</h3>
      <img style="width: 340px; height: 300px" src="../assets/img/print.png" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import navHead from "~/components/nav-head.vue";
import foot from "~/components/foot.vue";
import banner from "~/components/banner.vue";
import titles from "~/components/title.vue";
import titlebox from "~/components/titlebox.vue";
import countTo from "vue-count-to";
export default {
  name: "IndexPage",
  components: {
    navHead,
    foot,
    banner,
    titles,
    titlebox,
    countTo,
  },
  data() {
    return {
      dialogVisible: false,
      twocontentData4: {
        reverse: false,
        asidetitletop: "专业的私域管理工具",
        asidetitlebottom: "快速构建企业私域",
        img: require("../assets/img/yygl.png"),
        isCheckIcon: true,
        list: [
          {
            name: "移动端管理台",
            content: "在手机企业微信中即可进行便捷操作  ",
          },
          {
            name: "在职继承",
            content:
              "支持将在职员工的客户分配给指定员工继承，直接转移好友关系，无须二次添加，无须原员工同意，保证客户体验和服务质量;",
          },
          {
            name: "离职继承",
            content:
              "员工离职时，企业可将其名下客户(及群聊)分配给指定员工继承，保障企业客户资源不流失。",
          },
          {
            name: "标签管理",
            content: "识别管理用户标签，多维数据整合，绘制用户画像",
          },
        ],
      },
      twocontentData3: {
        asidetitletop: "加速企业私域扩容",
        asidetitlebottom: "引导用户分享，加速扩充社群用户",
        img: require("../assets/img/fxlbccc.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-helper",
        list: [
          {
            name: "群裂变",
            content: "支持快速创建企业自动群发任务，提升营销效率",
          },
          {
            name: "任务裂变",
            content: "支持多种类型内容素材的分享管理",
          },
        ],
      },
      twocontentData2: {
        reverse: false,
        asidetitletop: "洞悉用户喜好 精准内容推送",
        asidetitlebottom: "线上线下多场景快速添加客户微信",
        img: require("../assets/img/khyyccc.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-helper",
        list: [
          {
            name: "群画像",
            // content: '时刻了解群详情，及时制定并调整运营策略，提升社群转化'
          },
          {
            name: "流失提醒",
            // content: '监控整体客户流失情况，帮助减少客户流失'
          },
          {
            name: "朋友圈/群SOP",
            // content: '建立标准化的运营流程，提高运营效率'
          },
        ],
      },
      twocontentData1: {
        asidetitletop: "抓住用户激活黄金期",
        asidetitlebottom: "识别消息关键词，智能回复企业话术库预设消息，会话内容实时存档",
        img: require("../assets/img/yyzhccc.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-helper",
        list: [
          {
            name: "群发工具",
            // content: '支持快速创建企业自动群发任务，提升营销效率'
          },
          {
            name: "内容管理",
            // content: '支持多种类型内容素材的分享管理'
          },
          {
            name: "营销工具",
            // content: '提供丰富营销插件，提升客户和社群活跃，促进转化'
          },
        ],
      },
      twocontentData: {
        asidetitletop: "全渠道获客引流",
        asidetitlebottom: "线上线下多场景快速添加客户微信",
        img: require("../assets/img/tkylxx.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-helper",
        list: [
          {
            name: "群组活码",
            // content: '群活码永久有效，人满自动分群'
          },
          {
            name: "欢迎语",
            // content: '第一时间触达客户，快速建立联系'
          },
          {
            name: "批量加客户",
            // content: '本地批量导入，高效完成客户引流'
          },
          {
            name: "自动分流",
            // content: '多渠道活码引流，实时自动分流，分层精细化管理营'
          },
        ],
      },
      tabflagtwo: 0,
      contentData3: {
        reverse: false,
        asidetitletop: "⼀般事故理赔流程简化 ⼩额快速理赔",
        asidetitlebottom: "线上线下多场景快速添加客户微信",
        img: require("../assets/img/jslpccc.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-insurance",
        list: [
          {
            name: "在线报案",
            // content: '提供在在线报案服务，上传理赔资料，在线预审，避免资料重复收集，沟通高效可靠；理赔进度清晰可查，流程透明可管控。'
          },
          {
            name: "极速理赔",
            // content: '3000元以下快速理赔'
          },
          {
            name: "理赔无忧",
            // content: '24⼩时专⼈跟进，理赔⽆忧'
          },
        ],
      },
      contentData2: {
        reverse: false,
        asidetitletop: "在线加减保",
        asidetitlebottom: "入职加保 离职减保",
        img: require("../assets/img/sstbccc.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-insurance",
        list: [
          {
            name: "手机投保",
            // content: '在线操作加减保，完成保全操作，操作记录和人员信息可实时查询，数据可灵活进行统计分类，业务管理高效。'
          },
          {
            name: "极速投保",
            // content: '100人投保只需1分钟，效率更高'
          },
        ],
      },
      contentData: {
        asidetitletop: "配置保险⽅案丰富、覆盖场景多",
        asidetitlebottom: "多行业、全场景按项⽬灵活配置保险⽅案",
        img: require("../assets/img/gsbxccccx.png"),
        isCheckIcon: true,
        hasbtn: true,
        btnpath: "/sass-insurance",
        list: [
          {
            name: "场景工种全",
            // content: '群活码永久有效，人满自动分群'
          },
          {
            name: "保障时间久",
            // content: '第一时间触达客户，快速建立联系'
          },
          {
            name: "理赔范围广",
            // content: '本地批量导入，高效完成客户引流'
          },
        ],
      },
      tabflagone: 0,
      ishoverflag1: false,
      ishoverflag2: false,
      ishoverflag3: false,
      ishoverflag4: false,
      ishoverflag5: false,
      titlescontent5: {
        titletop: "合作伙伴",
        titlebottom: "他们都在用子弹人力云产品",
      },
      titlescontent4: {
        titletop: "全渠道经营场景",
        titlebottom: "应对复杂劳务市场，只需一个子弹",
      },
      titlescontent3: {
        titletop: "工伤保险",
        titlebottom: "覆盖场景多、工种全，支持日保、周期保，跨天无忧",
      },
      titlescontent2: {
        titletop: "子弹企微助手",
        titlebottom: "企微助手实现全流量承接与高效用户运营",
      },
      titlescontent1: {
        titletop: "子弹人力云八大核心产品",
        titlebottom: "覆盖全渠道、全行业、全场景需求",
      },
      titlescontent: {
        titletop: "每一个环节都值得做私域流量沉淀",
        titlebottom: "人力公司SaaS平台",
      },
      bannercontent: {
        bannertitlelist: ["人力行业一站式", "数字化管理平台"],
        msg:
          "子弹人力云平台链接6500家劳务公司、500万蓝领，日结工、外包、众包等用工方式,为人力资源行业打造一体化的用工SaaS平台",
        button: {
          isbtn: true,
          class: "bluebtn",
          name: "免费试用",
        },
        banner: require("../assets/img/banner1.png"),
      },
    };
  },
  mounted() {
    // const userAgent = navigator.userAgent.toLowerCase()
    // if (userAgent.includes('mobile')) {
    //   this.$router.replace({
    //     path: '/m/home'
    //   })
    // } else {
    //   this.$router.replace({
    //     path: '/'
    //   })
    // }
  },
  methods: {
    opentcc() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    changetabone(num) {
      this.tabflagone = num;
    },
    changetabtwo(num) {
      this.tabflagtwo = num;
    },
    handleMouseLeave1() {
      this.ishoverflag1 = false;
    },
    handleMouseEnter1() {
      this.ishoverflag1 = true;
    },
    handleMouseLeave2() {
      this.ishoverflag2 = false;
    },
    handleMouseEnter2() {
      this.ishoverflag2 = true;
    },
    handleMouseLeave3() {
      this.ishoverflag3 = false;
    },
    handleMouseEnter3() {
      this.ishoverflag3 = true;
    },
    handleMouseLeave4() {
      this.ishoverflag4 = false;
    },
    handleMouseEnter4() {
      this.ishoverflag4 = true;
    },
    handleMouseLeave5() {
      this.ishoverflag5 = false;
    },
    handleMouseEnter5() {
      this.ishoverflag5 = true;
    },
    topaywages() {
      this.$router.push("/sass-pay");
    },
    tohelper() {
      this.$router.push("/sass-helper");
    },
  },
};
</script>
<style lang="scss" scoped>
.tab1 {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  height: 40px;
  border-bottom: 1px solid #eaeaef;
  margin-bottom: 31px;
  font-size: 16px;
  color: #565868;

  .tabitem {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    cursor: pointer;
    text-align: center;

    .line {
      width: 62px;
      height: 1px;
      background-color: #eaeaef;
      margin-top: 21px;
    }
  }
}

.active {
  height: 2px !important;
  background-color: #3e5ff5 !important;
  margin-top: 20px !important;
}

.hoversmallimg {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  img {
    width: auto;
    height: 188px;
  }
}

.hoverbox {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 200px;
  display: flex;
  align-items: center;
  height: 484px;

  .hoveritem {
    transition: all 0.2s ease !important;
    height: 100%;
    width: 25%;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #dddddd;
    margin-right: -1px;

    .titlebord {
      color: #202536;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
      box-sizing: border-box;
    }

    .titlenobord {
      color: #565868;
      font-size: 14px;
      box-sizing: border-box;
      width: 100%;
      padding: 0 20px;
      text-align: center;
      margin-bottom: 20px;
      height: 40px;
    }

    .top1 {
      height: 148px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      img {
        margin-top: 30px;
        width: 44px;
        height: 44px;
      }
    }

    .hoverimg {
      width: 100%;
      height: 290px;
      padding: 0 11px;
      box-sizing: border-box;

      img {
        width: auto;
        height: 290px;
      }
    }

    .hoverbtn {
      margin-top: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn {
        width: 150px;
        height: 46px;
        border-radius: 8px;
        opacity: 1;
        background: #3e5ff5;
        box-sizing: border-box;
        border: 1px solid #3e5ff5;
        text-align: center;
        line-height: 46px;
        font-size: 16px;
        color: #ffffff;
      }
    }

    .hovertitlenobord {
      width: 100%;
      box-sizing: border-box;
      padding: 30px 30px 20px;
      text-align: center;
      color: #565868;
      font-size: 14px;
    }

    .top2 {
      box-sizing: border-box;
      width: 100%;
      background-color: #3e5ff5;
      height: 54px;
      display: flex;
      align-items: center;
      padding-left: 32px;
      font-size: 16px;
      color: #ffffff;
      font-weight: 700;
      border-top-right-radius: 7px;
      border-top-left-radius: 7px;

      img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }
  }

  .hoveritem1 {
  }

  .hoveritem1:hover {
    width: 40% !important;
    border: 2.05px solid #3e5ff5;
  }

  .hoveritem2:hover {
    width: 40% !important;
    border: 2.05px solid #3e5ff5;
  }

  .hoveritem3:hover {
    width: 40% !important;
    border: 2.05px solid #3e5ff5;
  }

  .hoveritem4:hover {
    width: 40% !important;
    border: 2.05px solid #3e5ff5;
  }

  .hoveritem5:hover {
    width: 40% !important;
    border: 2.05px solid #3e5ff5;
  }
}

.aboutsmallimg {
  margin-bottom: 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 728px;
    height: 366px;
  }
}

.bacbox {
  width: 100%;
  box-sizing: border-box;
  padding: 72px 40px;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(62, 95, 245, 0.5) -881%, #ffffff 60%);
  box-shadow: 0px 24px 40px 0px rgba(32, 37, 54, 0.04), inset 0px 1px 0px 0px #ffffff;
  margin-bottom: 120px;

  .item {
    flex: 1;
    text-align: center;

    .top {
      color: #202536;
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 16px;

      span {
        font-size: 14px;
      }
    }

    .bottom {
      font-size: 16px;
      color: #565868;
    }
  }

  .line {
    width: 2px;
    height: 47px;
    background-color: #f4f4f7;
  }
}

.friends {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .img {
    width: 156px;
    height: 156px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
.fs-24 {
  font-size: 24px !important;
}

.product {
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-bottom: 170px;

  .productlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 421px;
    width: 261px;
    margin-bottom: 30px;
  }

  .productlist {
    border: 1px solid #dee0e3;
    background: #fafafc;
    border-radius: 10px;
    padding-top: 75px;
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;

    .img1 {
      background-image: url(../assets/img/xb1.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img2 {
      background-image: url(../assets/img/xb2.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img3 {
      background-image: url(../assets/img/xb3.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img4 {
      background-image: url(../assets/img/xb4.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img5 {
      background-image: url(../assets/img/xb5.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img6 {
      background-image: url(../assets/img/xb6.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img7 {
      background-image: url(../assets/img/xb7.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .img8 {
      background-image: url(../assets/img/xb8.png);
      background-position: 0.0625rem 0.375rem;
      background-repeat: no-repeat;
      height: 100px;
      width: 100px;
      animation: leave 0.4s steps(17) forwards;
    }

    .h2 {
      font-size: 18px;
      color: #202536;
      font-weight: 900;
      text-align: center;
      margin-bottom: 30px;
    }

    p {
      font-size: 14px;
      color: #565868;
      line-height: 30px;
    }
  }

  .productlist:hover {
    cursor: pointer;
    box-shadow: 0px 0px 0.125rem 0px #d0d0d0;

    .img {
      animation: pull 0.4s steps(17) forwards;
    }
  }
}

@keyframes pull {
  0% {
    background-position: 5px 0px;
  }

  100% {
    background-position: 5px -1665px;
  }
}

@keyframes leave {
  0% {
    background-position: 5px -1665px;
  }

  100% {
    background-position: 5px 0px;
  }
}
</style>
